<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- header -->
		<%@ include file="/WEB-INF/views/include/header.jsp"%>
		<style>
			#xscbk .box4 {
			  padding-top: 10px;
			  padding-left: 20px;
			  cursor: pointer;
			  height: 130px;
			  font-size: 18px;
			  text-align: center;
			  border-radius: 10px;
			  color: #fff;
			  background-color: #c9c9c9;
			  box-shadow: 0 4px 0 #b9b8b8;
			}
			#xscbk .box4.active {
			  background-color: #56d7ab;
			  box-shadow: 0 4px 0 #5bc7a2;
			}
			#xscbk .box4 .title {
			  text-align: left;
			  font-size: 24px;
			}
			#xscbk .box4 p em {
			  font-size: 36px;
			}
			body {
				background-color: #fff;
			}
			.shadow-box {
				border-radius: 8px;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
				margin-bottom:18px;
			}
			#xscbk {
				margin-bottom:18px;
			}
			</style>
	</head>
	<body class="no-skin">
		<!-- /section:basics/navbar.layout -->
		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<div class="row" id="xscbk">
						    <div class="col-xs-3 box-container">
						        <div class="box4 active">
						            <p class="title">落地项目</p>
						            <p><em>${pro.tuidong}</em>亿</p>
						        </div>
						    </div>
						    <div class="col-xs-3 box-container">
						        <div class="box4">
						            <p class="title">签约项目</p>
						            <p><em>${pro.qianyue}</em>亿</p>
						        </div>
						    </div>
						    <div class="col-xs-3 box-container">
						        <div class="box4">
						            <p class="title">在谈项目</p>
						            <p><em>${pro.zaitan}</em>亿</p>
						        </div>
						    </div>
						    <div class="col-xs-3 box-container">
						        <div class="box4">
						            <p class="title">线索项目</p>
						            <p><em>${pro.xiansuo}</em>亿</p>
						        </div>
						    </div>
						</div>
					
						<!-- /section:settings.box -->
						<div class="row">
							<div class="col-xs-12">
							
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12 shadow-box">
								<!-- PAGE CONTENT BEGINS -->
									<!-- jqGrid表格 -->
									<table id="gridTable"></table>
									<!-- jqGrid工具类 -->
									<div id="gridPager"></div>
									<!-- 查询对话框 -->
									<div style="display: none;">
										<div class="row" id="queryDialog"></div>
									</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
			
			<!-- dialog -->
			<%@ include file="/WEB-INF/views/include/dialog.jsp"%>
		</div><!-- /.main-container -->
	</div>	
		<!-- footer -->
		<%@ include file="/WEB-INF/views/include/footer.jsp"%>
		
		<script type="text/javascript">
			//基本路径
			var baseUrl = "<s:url value="/chart/show/clue"></s:url>/"
			
			//jqgrid的表格高度
			var height = 320;
			//jqgrid表格行头的中文
			var colNames = ['','项目名称','投资方','联系人','建设内容','对接情况','拟投资额','对接单位','对接人，联系电话','对接领导','项目阶段'];
			//jqgrid表格中每一行的信息模型
			var colModel = [
				{name:'sysId', width:0, hidden: true,key:true},
				{name:'projectname',projectname:'projectname', width:250,editable: true},
				{name:'investment',projectname:'investment', width:210,editable: true},
				{name:'contacts',projectname:'contacts', width:180,editable: true},
				{name:'content',projectname:'content', width:280,editable: true},
				{name:'docking',projectname:'docking', width:380,editable: true},
				{name:'propinvest',projectname:'propinvest', width:120,editable: true},
				{name:'dockingdep',projectname:'dockingdep', width:120,editable: true},
				{name:'dockingcontacts',projectname:'dockingcontacts', width:150,editable: true},
				{name:'projectleader',projectname:'projectleader', width:150,editable: true},
				{name:'projectStage',projectname:'projectStage', width:150,editable: true}
			
			];
			
			//jqgrid的具体执行方法
			jqgrid({
				shrinkToFit:false,
              
				gridTableId : "#gridTable",
				gridPagerId : "#gridPager"
			});
			
		
			var nowIndex = 0;
			$('#xscbk').on('click', '.box4', function() {
			    var clickIndex = $(this).parent('.box-container').index();
			    // 如果点击当前则返回
			    if(nowIndex == clickIndex) {
			        return;
			    }
			    $('#xscbk .box4').removeClass('active');
			    $(this).addClass('active');
			    nowIndex = clickIndex;
			    // 根据nowIndex去做不同处理
				var prostage ='落地项目';
			    if(nowIndex ==0){
			    	prostage ='落地项目';
			    }
				if(nowIndex ==1){
					prostage ='签约项目';
				}
				if(nowIndex==2) {
					prostage ='在谈项目';
				}
				if(nowIndex==3) {
					prostage ='线索项目';
				}
				
				var stage={'projectStage':prostage};
				query(stage);
				
			    console.log(nowIndex);
			});
			
			function query(stage)
			{
				var postData = appendPostDataJson("#gridTable", stage);
				seachJqgirdData("#gridTable",postData);
			}
		</script>
		
	</body>
</html>